<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>公章管理</el-breadcrumb-item>
            <el-breadcrumb-item>公章管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :inline="true" :model="selectfrom" ref="_selectfrom" class="demo-form-inline">
            <el-row :gutter="5">
                <el-form-item label="公章">
                    <el-select style="width: 150px" placeholder="公章" v-model="selectfrom.OfficialsealId" filterable>
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="v in ApplicantDatas"
                                   :label="v.Name" :value="v.Id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请人">
                    <el-select style="width: 150px" placeholder="申请人" v-model="selectfrom.ApplicantId" filterable>
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8"
                                   :label="v.UserName" :value="v.Id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="使用地点">
                    <el-input style="width: 150px" placeholder="使用地点" v-model="selectfrom.UseAddress"></el-input>
                </el-form-item>
                <el-button plain type="success" icon="el-icon-search" @click="formdata"></el-button>
            </el-row>
        </el-form>
        <el-row style="padding-bottom: 10px;">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除
                    </el-button>
                    <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline"
                               @click="Add_OfficialSealData_dialog=true">添加公章使用记录
                    </el-button>
                </el-button-group>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%" @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center"
                                     :index="indexMethod"></el-table-column>
                    <el-table-column prop="OfficialsealId" label="公章" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ GetApplicantName(slot.row.OfficialsealId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="ApplicantId" label="申请人" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.ApplicantId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="StartTime" label="开始时间" show-overflow-tooltip align="center"
                                     width="100"></el-table-column>
                    <el-table-column prop="EndTime" label="结束时间" show-overflow-tooltip align="center"
                                     width="100"></el-table-column>
                    <el-table-column prop="State" label="状态" show-overflow-tooltip align="center" width="120">
                        <template slot-scope="slot">
                            <div v-html="InitStateColum(slot.row)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="UseAddress" label="使用地点" show-overflow-tooltip
                                     align="center"></el-table-column>
                    <el-table-column prop="Reason" label="事由" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="IsAuditEnd" label="审批完成" show-overflow-tooltip align="center"
                                     width="200">
                        <template slot-scope="slot">
                            <div :style="{'color':(slot.row.IsAuditEnd ? 'green' : 'red')}">
                                {{ slot.row.IsAuditEnd ? '已完成' : '未完成' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="320" align="center">
                        <template slot-scope="scope">
                            <el-button plain type="warning" @click="officialSealDataOrder_event(scope.row)" size="mini">
                                审批单
                            </el-button>
                            <el-button plain type="info" size="mini" @click="handleClick(scope.row,true)">查看</el-button>
                            <el-button plain @click="handleClick(scope.row,false)" type="success" size="mini">编辑
                            </el-button>
                            <el-button plain type="danger" size="mini" @click="BatchDeleteOne_event(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="Add_OfficialSealData_dialog" title="申请公章" top="10px" width="85%"
                   @close="AddOfficialSealDataCloseEvent">
            <AddOfficialSealData ref="AddOfficialSealData_refs" :ApplicantDatas="ApplicantDatas"></AddOfficialSealData>
        </el-dialog>
        <el-dialog :visible.sync="Update_OfficialSealData.dialog" top="10px"
                   :title="'修改公章申请---'+Update_OfficialSealData.title" width="85%">
            <UpdateOfficialSealData :is-see="IsSee" :OfficialSealData="OfficialSealDataDetails"
                                    :ApplicantDatas="ApplicantDatas"></UpdateOfficialSealData>
        </el-dialog>
        <el-dialog :visible.sync="Table_OfficialSealData.dialog" width="100%" :fullscreen="true"
                   :title="'公章申请审批单---'+Table_OfficialSealData.title" :before-close="onClose">
            <OfficialSealDataTable :audit-rule="auditRule" :OfficialSealData="OfficialSealDataDetails_table"
                                   :ApplicantDatas="ApplicantDatas"></OfficialSealDataTable>
        </el-dialog>
    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import AddOfficialSealData from "./AddOfficialSealData"
    import UpdateOfficialSealData from "./UpdateOfficialSealData"
    import OfficialSealDataTable from "./OfficialSealDataTable"

    export default {
        name: "OfficialSealAdmin",
        components: {
            'AddOfficialSealData': AddOfficialSealData,
            'UpdateOfficialSealData': UpdateOfficialSealData,
            'OfficialSealDataTable': OfficialSealDataTable
        },
        data() {
            return {
                //表格查询数据
                selectfrom: {
                    OfficialsealId: "",
                    ApplicantId: "",
                    UseAddress: "",
                },
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //用于表示查看/编辑
                IsSee: false,
                //新建公章使用弹框
                Add_OfficialSealData_dialog: false,
                //多选列表的数据集合
                SelectMore_lis: [],
                //公章使用审批表格弹框
                Update_OfficialSealData: {
                    dialog: false,
                    title: '',
                },
                //公章使用详情数据,用于编辑
                OfficialSealDataDetails: {},
                // 公章数据
                ApplicantDatas: [],
                // 审批单
                Table_OfficialSealData: {
                    dialog: false,
                    title: '',
                },
                OfficialSealDataDetails_table: {},
                //审批数据
                auditRule: {},
            }
        },
        created() {
            // 拿取所有公章数据
            this.ApplicantDatas = publicjs.GetAllOfficialSeal(this.$http)
            this.formdata();
        },
        methods: {
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('OfficialSeal/GetOfficialSealRecord', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    OfficialsealId: this.selectfrom.OfficialsealId,
                    ApplicantId: this.selectfrom.ApplicantId,
                    UseAddress: this.selectfrom.UseAddress,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                }).catch(() => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            frmdate(obj) {
                return obj.split(' ')[0]
            },
            //状态
            InitStateColum(obj) {
                return publicjs.InitStateColum(obj)
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //获取对应人员名字
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            // 获取对应公章名字
            GetApplicantName(value) {
                for (let i = 0; i < this.ApplicantDatas.length; i++) {
                    if (this.ApplicantDatas[i].Id === value) {
                        return this.ApplicantDatas[i].Name;
                    }
                }
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //表格单个删除
            BatchDeleteOne_event(obj) {
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    let loadding = this.openLoading();
                    this.$http.post('OfficialSeal/DeleteOfficialSealRecord', [obj.Id]).then(res => {
                        loadding.close();
                        if (res.data.msg.IsSuccess) {
                            this.$message.success(res.data.msg.Msg)
                            this.formdata()
                        } else {
                            this.$message.warning(res.data.msg.Msg)
                        }
                    }).catch(() => {
                        loadding.close();
                        this.$message.error('服务器异常,请联系管理员!')
                    })
                }).catch(() => {
                    this.$message.info('已取消!')
                })
            },
            //批量删除
            BatchDelete_event() {
                let Ids = []
                if (this.SelectMore_lis.length == 0) {
                    this.$message.warning('您还未选择需要删除的设备!')
                } else {
                    for (let i = 0; i < this.SelectMore_lis.length; i++) {
                        Ids.push(this.SelectMore_lis[i].Id)
                    }
                    this.$confirm('你确定要删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let loadding = this.openLoading();
                        this.$http.post('OfficialSeal/DeleteOfficialSealRecord', Ids).then(res => {
                            loadding.close();
                            if (res.data.msg.IsSuccess) {
                                this.$message.success(res.data.msg.Msg)
                                this.formdata()
                                this.SelectMore_lis = []
                            } else {
                                this.$message.warning(res.data.msg.Msg)
                            }
                        }).catch(() => {
                            loadding.close();
                            this.$message.error('服务器异常,请联系管理员!')
                        })
                    }).catch(() => {
                        this.$message.info('已取消!')
                        this.SelectMore_lis = []
                    })

                }
            },
            //编辑
            handleClick(obj, Isshow) {
                if (obj.ApplicantId === this.$store.state.user.id) {
                    let newdata = JSON.stringify(obj)
                    this.OfficialSealDataDetails = JSON.parse(newdata)
                    this.Update_OfficialSealData.dialog = true
                    this.Update_OfficialSealData.title = this.GetApplicantName(obj.OfficialsealId) +
                        "，" + this.GetUserName(obj.ApplicantId)
                    this.IsSee = Isshow
                } else {
                    this.$message.warning('操作失败，只能操作本部门或者本人提交的公章')
                }
            },
            //添加申购关闭
            AddOfficialSealDataCloseEvent() {
                this.$refs['AddOfficialSealData_refs'].dialog_close()
            },
            //使用审批单
            officialSealDataOrder_event(obj) {
                this.$http.get('OfficialSeal/OfficialSealRecordOne?Id=' + obj.Id).then(res => {
                    if (res.data.obj != null) {
                        this.auditRule = res.data.auditRule
                        this.OfficialSealDataDetails_table = res.data.obj
                        this.Table_OfficialSealData.dialog = true
                        this.Table_OfficialSealData.title = this.GetApplicantName(obj.OfficialsealId) +
                            "，" + this.GetUserName(obj.ApplicantId)
                        let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                        for (let i = 0; i < reportMianShow.length; i++) {
                            reportMianShow[i].style.display = "none";
                        }
                    }
                })
            },
            async onClose(done) {
                await done();
                let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                for (let i = 0; i < reportMianShow.length; i++) {
                    reportMianShow[i].style.display = "inline-block";
                }
            },
        }
    }
</script>

<style scoped>

</style>